<template>
    <div class="tmp">
        <div class='compute'>
            <div class='compute_left' @click='getjian'>-</div>
            <div class='compute_num'>{{shopnumber.number}}</div>
            <div class='compute_right' @click='getadd'>+</div>
        </div>
    </div>
</template>
<script>
    import {vm,key2} from '../common/common.js';
    export default{
        props:['goodsnumber','goodsname'],
        data(){
            return{
                shopnumber:{
                    number:1,
                    name:''
                },
            }
        },
        methods:{
            getadd(){
                this.shopnumber.number>=1?this.shopnumber.number++:this.shopnumber.number=1;
                this.senddata();
                if(this.shopnumber.number>=1){
                    vm.$emit(key2,1);
                    this.setgoodsobj()
                }
            },
            getjian(){
                if(this.shopnumber.number>=2){
                    this.shopnumber.number--;
                    this.setgoodsobj()
                    vm.$emit(key2,-1);
                }else {
                    return
                }
                this.senddata();
            },
            //子组件传入购物数量给他的父组件
            senddata(){
                var number=this.shopnumber.number
                this.$emit('senddata',number);
            },
            //传递购物对象给购物车；
            setgoodsobj(){
                this.$emit('goodsobj',this.shopnumber);
            }
        },
        created(){
            this.shopnumber.name=this.goodsname;
            this.shopnumber.number= this.goodsnumber>0?this.goodsnumber:1;
            this.senddata();
        }
    }
</script>
<style scoped>
    .compute_left{
        width: 25px;
        height:25px;
        border: 1px solid #000000;
        border-right: 1px solid #000000;
        float: left;
        margin: 0px;
    }
    .compute_right{
        width: 25px;
        height:25px;
        border: 1px solid #000000;
        border-left:1px solid #000000;
        float: left;
    }
    .compute_num{
        width: 25px;
        height:25px;
        border: 0px solid #000000;
        border-bottom: 1px solid #000000;
        border-top: 1px solid #000000;
        float: left;
    }
    .compute{
        overflow: hidden;
        text-align: center;
        line-height: 25px;
        margin: 5px 0px 0 70px;
    }
</style>